<template>
  <div>
    <el-container>
      <el-header>
        <el-row
          ><el-col :span="2"> 服务处理 </el-col
          ><el-col :span="6" :offset="13">
            对于客户提出的咨询、建议、投诉等服务进行处理，并记录下处理结果
          </el-col></el-row
        >
      </el-header>
      <el-main>
        <el-table :data="tableData" style="width: 100%" border stripe>
          <el-table-column prop="CusName" label="客户名称" align="center">
          </el-table-column>
          <el-table-column prop="CSTitle" label="概要" align="center">
          </el-table-column>
          <el-table-column prop="STName" label="服务类型" align="center">
          </el-table-column>
          <el-table-column prop="UserLName" label="创建人" align="center">
          </el-table-column>
          <el-table-column prop="CSCreateDate" label="创建时间" align="center">
            <template slot-scope="scope">
              <span>{{ operatingTime(scope.row.CSCreateDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="cz(scope.row)"
                ><i class="el-icon-edit-outline"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row>
          <el-col :span="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <!--处理-->
    <el-dialog :visible.sync="dialogVisibleupdate" width="50%">
      <el-row>
        <el-form
          ref="formUpdate"
          :model="formUpdate"
          :rules="formruleUpdate"
          label-width="80px"
        >
          <el-col :span="12">
            <el-form-item label="客户编号" prop="CusID">
              <el-input v-model="formUpdate.CusID" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务类型" prop="STName">
              <el-input v-model="formUpdate.STName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时候" prop="CSCreateDate">
              <el-input v-model="formUpdate.CSCreateDate" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建人" prop="UserLName">
              <el-input v-model="formUpdate.UserLName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-form-item label="服务概要" prop="CSTitle">
            <el-input
              type="textarea"
              v-model="formUpdate.CSTitle"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="详细信息" prop="CSDesc">
            <el-input
              type="textarea"
              v-model="formUpdate.CSDesc"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item label="服务处理" prop="CSDeal">
            <el-input type="textarea" v-model="formUpdate.CSDeal"></el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleupdate = false">取 消</el-button>
        <el-button type="primary" @click="xg('formUpdate')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Updafwpd, Updafwcl } from "../http/user.js";
import q from "qs";
export default {
  data() {
    return {
      formUpdate: {
        CusID: "",
        STName: "",
        CSCreateDate: "",
        UserLName: "",
        CSTitle: "",
        CSDesc: "",
        CSDeal: "",
        CSID: "",
      },
      formruleUpdate: {
        CSDeal: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
      },
      //每页显示数
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      tableData: [],
      dialogVisibleupdate: false,
    };
  },
  methods: {
    xg(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Updafwcl(q.stringify(this.formUpdate))
            .then((res) => {
              console.info(res);
              if (res.Data == 1) {
                this.$message({
                  message: "处理成功",
                  type: "success",
                });
                this.sx();
                this.dialogVisibleupdate = false;
              }
            })
            .catch((err) => {
              console.info(err);
            });
        } else {
          this.$message({
            message: "请填处理内容",
            type: "error",
          });
          return false;
        }
      });
    },
    cz(row) {
      this.formUpdate.CusID = row.CusID;
      this.formUpdate.STName = row.STName;
      this.formUpdate.CSCreateDate = row.CSCreateDate;
      this.formUpdate.UserLName = row.UserLName;
      this.formUpdate.CSTitle = row.CSTitle;
      this.formUpdate.CSDesc = row.CSDesc;
      this.formUpdate.CSDeal = row.CSDeal;
      this.formUpdate.CSID = row.CSID;
      this.dialogVisibleupdate = true;
    },
    operatingTime(timeDate) {
      return this.$moment(timeDate).format("YYYY-MM-DD");
    },
    sx() {
      Updafwpd({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.info(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.sx();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.sx();
    },
  },
  mounted() {
    this.sx();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-2 {
  width: 8.33333%;
  font-size: 17px;
  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
</style>